import React from 'react';
// import Head from 'next/head'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { Button, Table, TableBody, TableCell, Dialog, DialogActions, TextField, DialogContent, DialogTitle, Slide, TableRow, Paper } from '@material-ui/core';
import styled from 'styled-components'
import swal from 'sweetalert2';
import axios from 'axios';
import withRoot from './withRoot';


function Transition(props) {
    return <Slide direction="up" {...props} />;
}


const UserImg = styled.img`
width:80px;
    height:80px;
 

`;

const UserTableRow = styled(TableRow)`
&&{
    &:hover {
        background:#eee;
    }
}
`;

const CustomTableCell = withStyles(theme => ({
    head: {
        //   backgroundColor: 
        color: theme.palette.common.black,
        fontSize: 14,
        padding: 4,
        textAlign: 'center',
 
    },
    body: {
        fontSize: 14,
        padding: 4,
        textAlign: 'center',

    },
}))(TableCell);
const styles = theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,
        overflowX: 'auto',

    },
    row: {
        '&:nth-of-type(odd)': {
            backgroundColor: theme.palette.background.default,
        },
    },
    text_left: {
        textAlign: 'left !important',
    },
});

class UserProfile extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            permission: this.props.user_profile.permission,
        }


        this.UserMessageClose = this.UserMessageClose.bind(this);
        this.UserMessageSave = this.UserMessageSave.bind(this);

    }


    UserMessageClose = () => {

        this.props.transferOpen(false)

    };

    UserMessageSave() {

        const permission = this.state.permission,
            user_profile = this.props.user_profile;

        if (isNaN(permission) || permission > 4 || permission < 1) {
            this.props.transferOpen(false)
            return swal({
                title: isNaN(permission) ? "请输入数字" : '权限范围应该在1~4之间',
                // text: json.message,
                // timer: 1500,
                showConfirmButton: true,
                type: "error",
            })
        }

        if (this.state.permission != user_profile.permission) {

            let formData = new FormData();
            formData.append('permission', permission);
            formData.append('user_profile_id', user_profile._id);

            axios({
                url: "/submit_user_message",
                method: 'post',
                data: formData,
                withCredentials: true,
            })
                .then(response => {
                    return response.data;
                })
                .then(json => {
             
                    if (json.err == 0) {
                        this.props.transferOpen(false);
                        this.props.transferRefresh(true);
                        swal({
                            title: "修改成功",
                            timer: 3000,
                            showConfirmButton: true,
                            type: "success",
                        })
                    } else {
                        this.props.transferOpen(false);
                        this.props.transferRefresh(true);
                        swal({
                            title: "修改失败",
                            text: '保存更新数据失败,请检测输入的内容并重试!',
                            showConfirmButton: true,
                            type: "error",
                        })
                    }

                    return json;
                }).catch(err => {
                    console.log(err)
                })


        }


    }
    handleChange(ev) {

        this.setState({ permission: ev.target.value });

    }


    render() {
        const { classes, user_profile } = this.props,
            { permission } = this.state;

        return (
            <Paper className={classes.root}>


                <Dialog
                    keepMounted
                    open={this.props.open}
                    TransitionComponent={Transition}
                    aria-labelledby="alert-dialog-slide-title"
                    aria-describedby="alert-dialog-slide-description"
                    onClose={this.UserMessageClose}
                >
                    <DialogTitle id="alert-dialog-slide-title">
                        {"编辑用户信息"}
                    </DialogTitle>
                    <DialogContent>

                        <Table>
                            <TableBody>
                                <UserTableRow className={classes.row}>
                                    <CustomTableCell component="th" scope="row">

                                        用户ID:
                                    </CustomTableCell>
                                    <CustomTableCell className={classes.text_left} >
                                        {user_profile.user._id}

                                    </CustomTableCell>
                                </UserTableRow>
                                <UserTableRow className={classes.row}>
                                    <CustomTableCell component="th" scope="row">

                                        用户头像:
                                    </CustomTableCell>
                                    <CustomTableCell className={classes.text_left}  >
                                        <UserImg src='/static/img/matthew.png' alt="" />


                                    </CustomTableCell>
                                </UserTableRow>
                                <UserTableRow className={classes.row}>
                                    <CustomTableCell component="th" scope="row">

                                        手机号:
                                    </CustomTableCell>
                                    <CustomTableCell className={classes.text_left}  >
                                        {user_profile.user.phone}

                                    </CustomTableCell>
                                </UserTableRow>

                                <UserTableRow className={classes.row}>
                                    <CustomTableCell component="th" scope="row">

                                        用户权限:
                                    </CustomTableCell>
                                    <CustomTableCell className={classes.text_left}  >
                                        <TextField
                                            id="balance-input"
                                            value={permission}
                                            margin="none"
                                            inputProps={{
                                                'aria-label': 'Description',
                                            }}
                                            onChange={ev => this.handleChange(ev)}
                                        />


                                    </CustomTableCell>
                                </UserTableRow>

                            </TableBody>
                        </Table>


                    </DialogContent>
                    <DialogActions>

                        <Button color="primary" onClick={this.UserMessageSave}>
                            保存
                        </Button>
                        <Button color="primary" onClick={this.UserMessageClose}>
                            取消
                        </Button>
                    </DialogActions>
                </Dialog>

            </Paper>
        );
    }
}
UserProfile.propTypes = {
    classes: PropTypes.object.isRequired,
    // theme: PropTypes.object.isRequired,
};

export default withRoot(withStyles(styles)(UserProfile));